<style lang="scss" scoped>
#cmain {
  .main_inner {
    position: relative;
    min-height: 300px;
    .title {
      width: 100%;
      padding-bottom: 15px;
      border-bottom: 1px solid #dcdfe6;
      span {
        color: #666;
        font-size: 16px;
        line-height: 23px;
        font-weight: bold;
      }
    }
    .content {
      padding: 30px;
      form {
        & > div {
          min-height: 57px;
          display: flex;
          .ivu-form-item {
            float: left;
            flex: 1;
            .ivu-date-picker {
              width: 100%;
            }
          }
        }
      }

      .editFamily {
        margin-top: 15px;
      }
      .handler {
        float: right;
        & > button + button {
          margin-left: 20px;
        }
        & > button {
          width: 100px;
        }
      }
    }
  }
}
</style>

<template>
    <div id="cmain" class="cmain">
        <Row class="main_inner">
            <Col v-if="!isShowerror">
                <div class="title">
                    <span>病人信息</span>
                </div>
                <div class="content">
                    <Form :label-width="80">
                        <div>
                            <FormItem label="病人编号">
                                <Input v-model="patientInfo.patientcode" disabled></Input>
                            </FormItem>
                            <FormItem label="病人姓名">
                                <Input v-model="patientInfo.patientname"></Input>
                            </FormItem>
                            <FormItem label="出生日期">
                                <DatePicker type="date" placeholder="选择日期" v-model="birthday" format="yyyy-MM-dd" @on-change="time"></DatePicker>
                            </FormItem>
                        </div>
                        <div>
                            <FormItem label="性别">
                                <Select v-model="patientInfo.gender">
                                    <Option v-for="item in sexs" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="血缘关系">
                                <Input v-model="patientInfo.consanguinity"></Input>
                            </FormItem>
                            <FormItem label="民族">
                                <Input v-model="patientInfo.nation"></Input>
                            </FormItem>
                        </div>
                        <div>
                            <FormItem label="临床描述">
                                <Input type="textarea" :rows="4" placeholder="请输入不超过800个字" v-model="patientInfo.clinicalinf" @on-blur="getqueryStr"></Input>
                            </FormItem>
                            <FormItem label="肿瘤类型" v-if='diseaseShow'>
                                <Select v-model="patientInfo.diseasetype">
                                    <Option v-for="item in diseaseTypeDefault" :value="item.value" :key="item.value">{{item.label}}</Option>
                                </Select>
                            </FormItem>
                        </div>
                    </Form>
                </div>
            </Col>
            <Col v-if="!isShowerror">
                <div class="title">
                    <span>样本信息</span>
                </div>
                <div class="content">
                    <div class="samplelist">
                        <el-table v-loading="loading" element-loading-text="数据加载中，请稍后" :data='sampleInfo' border style="width: 100%">
                            <el-table-column label="样本编号" prop='samplecode'></el-table-column>
                            <el-table-column label="亲属关系">
                                <template slot-scope="scope">
                                    <Select v-model="scope.row.designator" v-if = "scope.$index==0" style="width:200px">
                                        <Option v-for="item in designatorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                    <Select v-model="scope.row.designator" v-else style="width:200px">
                                        <Option v-if = "item.value!='先证者'" v-for="item in designatorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </template>
                            </el-table-column>
                            <el-table-column label="患病状态" prop='sick'>
                                <template slot-scope="scope">
                                    <Select v-model="scope.row.sickState" style="width:200px">
                                        <Option v-for="item in sickList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </template>
                            </el-table-column>
                            <el-table-column label="QC结果查看">
                                <template slot-scope="scope">
                                    <a href='javascript:;' @click='check(scope.row)' style="line-height:45px;">查看</a>
                                </template>
                            </el-table-column>
                            <div slot="empty"></div>
                        </el-table>
                        <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                    </div>
                    <div class='editFamily'>
                        <div class="editFamily_title">
                            <span style="font-size:14px;">家树系统</span>
                            <span style="font-size:18px;margin-left:4px;color:#007EDB;vertical-align: bottom;">
                                <Icon type="ios-compose"></Icon>
                            </span>
                        </div>
                        <div style="width:365px;margin-top:10px;">
                            <Input type="textarea"></Input>
                        </div>
                    </div>
                </div>
            </Col>
            <Col v-if="!isShowerror">
                <div class="title">
                    <span>HPO词条</span>
                </div>
                <div class="content">
                    <Form :label-width="90">
                        <div>
                            <FormItem label="HPO词条输入">
                                <hpolist @update='hpoupdate' :message='queryStr'></hpolist>
                            </FormItem>
                            <FormItem></FormItem>
                            <FormItem></FormItem>
                        </div>
                    </Form>
                </div>
            </Col>
            <Col v-if="!isShowerror">
                <div class="title"></div>
                <div class="content">
                    <div class="handler">
                        <Button type="ghost" @click="back">返回</Button>
                        <Button type="primary" @click='submitDataByPaientId'>确定</Button>
                        <Button type="primary" @click="viewResult">分析</Button>
    
                
                    </div>
                </div>
            </Col>
            <error v-if="isShowerror" @errorCallback="getDataByPaientId"></error>
        </Row>
        
        <!--返回提示-->
        <Modal v-model="backModel" title="返回提示" width="300" :mask-closable="false">
            <p style="padding:20px;text-align:center;font-size:18px;">信息未保存确定返回？</p>
            <div slot='footer' class='tip-footer'>
                <Button type="ghost" @click="backCancel">取消</Button>
                <Button type="primary" @click="backClick">确定</Button>
            </div>
        </Modal>
         <!--分析提示-->
        <Modal v-model="backModelF" title="分析提示" width="300" :mask-closable="false">
            <p style="padding:20px;text-align:center;font-size:18px;">信息未保存确定分析？</p>
            <div slot='footer' class='tip-footer'>
                <Button type="ghost" @click="backCancelF">取消</Button>
                <Button type="primary" @click="backClickF">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";

import { data } from "api/index.js";
import hpolist from "@/components/hpo.vue";
import error from "@/components/404.vue";
export default {
  name: "analysis",
  data() {
    return {
      backModel: false, //返回按钮提示窗
      backModelF:false,
      loading: false,
      isShowerror: false,
      emptyShow:false,
      patientInfo: {
        // patientid: "",
        // patientcode: "",
        // patientname: "",
        // birthday: "",
        // gender: "",
        // consanguinity: "",
        // nation: "",
        // clinicalinf: "",
        // description: "", //病人信息
        // chpo: ""
      },
      clinicalinf: "",
      diseaseShow: false,
      oldPatientInfo: {}, //原始病人数据
      birthday: "", //生日
      sexs: [
        {
          //性别
          value: "true",
          label: "男"
        },
        {
          value: "false",
          label: "女"
        }
      ],
      designatorList: [
        {
          value: "先证者",
          label: "先证者"
        },
        {
          value: "父亲",
          label: "父亲"
        },
        {
          value: "母亲",
          label: "母亲"
        },
        {
          value: "兄弟",
          label: "兄弟"
        },
        {
          value: "姐妹",
          label: "姐妹"
        },
        {
          value: "祖父",
          label: "祖父"
        },
        {
          value: "祖母",
          label: "祖母"
        },
        {
          value: "外祖父",
          label: "外祖父"
        },
        {
          value: "外祖母",
          label: "外祖母"
        },
        {
          value: "舅舅",
          label: "舅舅"
        },
        {
          value: "姨妈",
          label: "姨妈"
        },
        {
          value: "叔叔",
          label: "叔叔"
        },
        {
          value: "姑姑",
          label: "姑姑"
        },
        {
          value: "同卵双胞胎",
          label: "同卵双胞胎"
        },
        {
          value: "异卵双胞胎",
          label: "异卵双胞胎"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      sickList: [
        {
          value: "患病",
          label: "患病"
        },
        {
          value: "未患病",
          label: "未患病"
        },
        {
          value: "未知",
          label: "未知"
        }
      ],
      diseaseTypeDefault: [
        {
          value: "0",
          label: "NONE"
        },
        {
          value: "1",
          label: "乳腺癌"
        },
        {
          value: "2",
          label: "子宫内膜癌"
        },
        {
          value: "3",
          label: "结直肠癌"
        },
        {
          value: "4",
          label: "胰腺癌"
        },
        {
          value: "5",
          label: "胃癌"
        },
        {
          value: "6",
          label: "前列腺癌"
        },
        {
          value: "7",
          label: "神经系统肿瘤"
        },
        {
          value: "8",
          label: "卵巢癌"
        },
        {
          value: "9",
          label: "肺癌"
        },
        {
          value: "10",
          label: "其他癌症"
        }
      ],
      sampleInfo: [],
      oldSampleInfo: [], //原始样本数据
      chpoModelList: [],
      update: false,
      queryStr: ""
    };
  },
  methods: {
    getqueryStr() {
      this.$store.state.queryStr = this.patientInfo.clinicalinf;
      this.queryStr = this.patientInfo.clinicalinf;
    },
    //查看分析结果
    viewResult() {
      if (
        this.validatePatientInfo() &&
        this.validateSampleInfo() &&
        this.update == false
      ) {
        let obj = {
          paientId: this.$store.state.patientid, //    row.patientid
          type: 6,
          userId: getCookie("userid"),
          productId: this.$store.state.productId
        };
        this.loading = true;
        console.log(obj);
        data.reviewVcfAnnoation(obj).then(res => {
          console.log(res);
          if (res.returnCode == 0 || res.returnCode == 200) {
            this.$store.state.pageindex = this.currentPage;
            this.$router.push("/rare/analyticRet2");
          } else if (res.returnCode == 605) {
            this.$Message.success(res.msg);
          } else if (res.returnCode == 611) {
            var _this = this;
            this.$Modal.confirm({
              title: "确认提示",
              content: "<p>信息已修改，是否重新注释?</p>",
              onCancel: () => {
                this.$store.state.pageindex = this.currentPage;
                this.$router.push("/rare/analyticRet2");
              }
            });
          } else {
            this.$Message.error(res.msg);
          }
          this.loading = false;
        });
      } else {
        this.backModelF = true;
      }
    },
    uploadAnnoation() {
      let obj = {
        paientId: this.$store.state.patientid, //  "45ec581ef7944f77b691251fb1374e3b"
        type: 6,
        userId: getCookie("userid"),
        productId: this.$store.state.productId
      };
      data.uploadAnnoation(obj).then(res => {
        if (res.returnCode == 0 || res.returnCode == 200) {
          this.$Message.success(res.msg);
        }
      });
    },
    hpoupdate(list) {
      if (this.$store.state.chpoModelList.length == 0) {
        this.patientInfo["chpoModelList"] = this.$store.state.oldchpoModelList;
      } else {
        this.patientInfo["chpoModelList"] = this.$store.state.chpoModelList;
      }
      var nowchpoModelList = [];
      list.forEach(function(ele) {
        let aa = ele.substring(0, ele.indexOf("("));
        let bb = ele.substring(ele.indexOf("(") + 1, ele.lastIndexOf(")"));
        let obj = {
          chpo_num: aa,
          chpo_en: null,
          chpo_cn: bb
        };
        nowchpoModelList.push(obj);
      });
      if (
        nowchpoModelList.length == this.$store.state.oldchpoModelList.length
      ) {
        var aaa = nowchpoModelList.concat(
          this.$store.state.oldchpoModelList || []
        );
        var bbb = this.heavy(aaa);
        if (bbb.length != nowchpoModelList.length) {
          this.update = true;
        }
      } else {
        this.update = true;
      }
    },
    // 数组去重
    heavy(arr) {
      var res = [];
      var json = {};
      for (var i = 0; i < arr.length; i++) {
        if (!json[JSON.stringify(arr[i])]) {
          res.push(arr[i]);
          json[JSON.stringify(arr[i])] = 1;
        }
      }
      return res;
    },
    //点击查看
    check(row) {
      switch (row.state) {
        case "0":
          this.$Message.error(" 没有执行pipeline任务!");
          break;
        case "1":
          this.$Message.error("  pipeline任务等待中!");
          break;
        case "2":
          this.$Message.error(" pipeline任务运行中!");
          break;
        case "3":
          this.$store.state.jobid = row.jobId;
          this.$store.state.samplecode = row.samplecode;
          this.$router.push("/rare/task-details?type=quality");
          break;
        case "4":
          this.$Message.error(" pipeline任务执行错误!");
          break;
      }
    },
    time(e) {
      this.birthday = e;
    },
    getDataByPaientId() {
      // this.$store.state.patientid
      // this.$store.state.sampleid
      let obj = {
        patient: {
          patientid: this.$store.state.patientid
        }
      };
      this.loading = true;
      data
        .getAnalysisDataByPaientId(obj)
        .then(res => {
          if (res.returnCode == 0 || res.returnCode == 200) {
            this.patientInfo = this.setPatientInfo(res.data);
            this.oldPatientInfo = M.clone(this.setPatientInfo(res.data));
            this.birthday = this.patientInfo.birthday;
            this.patientInfo.gender = String(this.patientInfo.gender);
            this.sampleInfo = res.data.samplelist;
            this.oldSampleInfo = M.clone(res.data.samplelist);
            this.clinicalinf = this.patientInfo.clinicalinf;
            this.oldchpoModelList = res.data.chpoModelList;
          } else {
            this.$Message.error(res.msg);
          }
          this.loading = false;
          this.isShowerror = false;
          if(this.sampleInfo==null || this.sampleInfo.length==0){
            this.emptyShow=true;
          }else{
                    this.emptyShow = false;
                }
        })
        .catch(error => {
          this.isShowerror = true;
        });
    },
    submitDataByPaientId() {
      var patientInfo = this.getPatientInfo();
      if (this.$store.state.chpoModelList.length == 0) {
        patientInfo["chpoModelList"] = this.$store.state.oldchpoModelList;
      } else {
        patientInfo["chpoModelList"] = this.$store.state.chpoModelList;
      }
      let obj = {
        patient: patientInfo,
        sample: this.sampleInfo
      };
      data.submitAnalysisDataByPaientId(obj).then(res => {
        if (res.returnCode == 0 || res.returnCode == 200) {
          //this.$router.push('/rare')
          this.$Message.success("修改成功");
          this.getDataByPaientId();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    //创建病人信息相关数据
    setPatientInfo(obj) {
      return {
        patientid: obj.patientid,
        patientcode: obj.patientcode,
        patientname: obj.patientname,
        birthday: obj.birthday,
        gender: obj.gender,
        consanguinity: obj.consanguinity,
        nation: obj.nation,
        clinicalinf: obj.clinicalinf
        //    description: "",
        //    chpo:""
      };
    },
    //获取病人信息相关数据
    getPatientInfo() {
      return {
        patientid: this.patientInfo.patientid,
        patientcode: this.patientInfo.patientcode,
        patientname: this.patientInfo.patientname,
        birthday: this.formatDate(this.birthday),
        gender: this.getGender(this.patientInfo.gender),
        consanguinity: this.patientInfo.consanguinity,
        nation: this.patientInfo.nation,
        clinicalinf: this.patientInfo.clinicalinf
      };
    },
    //返回首页
    back() {
      if (
        this.validatePatientInfo() &&
        this.validateSampleInfo() &&
        this.update == false
      ) {
        if(this.$store.state.productId==1){
                this.$router.push("/rare");
            }else if(this.$store.state.productId==2){
                this.$router.push("/tumor");
            }
      } else {
        this.backModel = true;
      }
    },
    // 数组去重
    heavy(arr) {
      var res = [];
      var json = {};
      for (var i = 0; i < arr.length; i++) {
        if (!json[JSON.stringify(arr[i])]) {
          res.push(arr[i]);
          json[JSON.stringify(arr[i])] = 1;
        }
      }
      return res;
    },
    //验证病人信息是否修改
    validatePatientInfo() {
      var ret = true;
      var nowPatientInfo = this.getPatientInfo();
      var flag = false; //未修改
      if (this.chpoModelList.length == 0) {
        flag = false;
      } else if (this.oldchpoModelList.length == this.chpoModelList.length) {
        var aaa = this.oldchpoModelList.concat(this.chpoModelList || []);
        var bbb = this.heavy(aaa);
        if (bbb.length != this.oldchpoModelList.length) {
          flag = true;
        }
      } else {
        flag = true;
      }
      if (!this.diff(nowPatientInfo, this.oldPatientInfo) || flag) {
        return false;
      }
      return ret;
    },
    //验证样本信息是否修改
    validateSampleInfo() {
      var ret = true;
      for (var i = 0; i < this.oldSampleInfo.length; i++) {
        if (!this.diff(this.oldSampleInfo[i], this.sampleInfo[i])) {
          ret = false;
          break;
        }
      }
      return ret;
    },
    //判断两个对象是否相等
    diff(obj1, obj2) {
      var o1 = obj1 instanceof Object;
      var o2 = obj2 instanceof Object;
      if (!o1 || !o2) {
        /*  判断不是对象  */
        return obj1 === obj2;
      }
      if (Object.keys(obj1).length !== Object.keys(obj2).length) {
        return false;
      }
      for (var attr in obj1) {
        var t1 = obj1[attr] instanceof Object;
        var t2 = obj2[attr] instanceof Object;
        if (t1 && t2) {
          return diff(obj1[attr], obj2[attr]);
        } else if (obj1[attr] !== obj2[attr]) {
          return false;
        }
      }
      return true;
    },
    //返回取消
    backCancel() {
      this.backModel = false;
    },
    //分析取消
     backCancelF() {
      this.backModelF = false;
    },
    //返回确定
    backClick() {
      if(this.$store.state.productId==1){
                this.$router.push("/rare");
            }else if(this.$store.state.productId==2){
                this.$router.push("/tumor");
            }
    },
    //分析确定
    backClickF() {
      this.$router.push("/rare/analyticRet2");
    },
    //转换性别类型
    getGender(str) {
      if (str == "false") {
        return false;
      } else if (str == "true") {
        return true;
      } else {
        return null;
      }
    },
    formatDate(date) {
      var youWant;
      if (date != "") {
        var d = new Date(date);
        var month, dates;
        if (d.getMonth() + 1 < 10) {
          month = "-0" + (d.getMonth() + 1);
        } else {
          month = "-" + d.getMonth() + 1;
        }
        if (d.getDate() < 10) {
          dates = "-0" + d.getDate();
        } else {
          dates = "-" + d.getDate();
        }
        youWant = d.getFullYear() + month + dates;
      } else {
        youWant = "";
      }
      return youWant;
    }
  },
  components: {
    hpolist,
    error
  },
  mounted() {
    this.getDataByPaientId();
  }
};
</script>

